<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
        请注意:elementui的css文件中引用了element-icons.ttf和element-icons.woff2文件,否则图标不显示
        src:url(fonts/element-icons.woff) format("woff"),url(fonts/element-icons.ttf)
-->
    <link rel="stylesheet" href="static/css/index.css">
    <script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/vue-resource.min.js"></script>
    <script type="text/javascript" src="static/js/vue-router.min.js"></script>
    <script type="text/javascript" src="static/js/element-ui.js"></script>
    <script type="text/javascript" src="static/js/axios.min.js"></script>
    <script type="text/javascript" src="static/js/mock.js"></script>

</head>
<body>
<div id="pageInfo" style="display: flex;width: 100%;height: 100vh;background-color: rgba(173, 216, 300, 0.3)">


    <!--            下拉树-->
    <div id="boxleft" style="flex: 1; ">
        <el-card class="box-card" style="margin: 20px;border-radius: 16px;height: 95%">
            <el-input
                    placeholder="输入关键字进行过滤"
                    v-model="filterText">
            </el-input>

            <el-tree
                    class="filter-tree"
                    :data="data"
                    :props="defaultProps"
                    default-expand-all
                    :filter-node-method="filterNode"
                    ref="tree">
            </el-tree>
        </el-card>

    </div>
    <div id="boxright" style="flex: 5; margin-right: 20px;">
        <div style="margin-top: 20px;height: 40%;">
            <el-row :gutter="20">
                <el-col :span="8" :offset="16">
                    <div class="grid-content bg-purple"></div>
                    <el-button type="primary" size="medium">添加规则</el-button>
                    <el-button type="primary" size="medium">添加需求</el-button>
                </el-col>
            </el-row>


            <el-card class="box-card" style="margin: 20px;border-radius: 16px;">
                <el-descriptions title="需求信息" column="2" colon style="margin-bottom: 20px">
                    <el-descriptions-item label="较新分支号">
                        9877777777777777777070709780978-0980980780970970890700sdfgsdf.git
                    </el-descriptions-item>
                    <el-descriptions-item label="对应版本号">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
                    <el-descriptions-item label="较旧分支">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
                    <el-descriptions-item label="对应版本号">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
                    <el-descriptions-item label="虚拟项目">手机银行7.0</el-descriptions-item>
                    <el-descriptions-item label="真实项目">mbs_batch-批处理微服务</el-descriptions-item>
                    <el-descriptions-item label="用户名">mbs_batch-批处理微服务</el-descriptions-item>
                    <el-descriptions-item label="密码">RM_0002435q345345346643646理财模块提升需求发噶补充岁的娃娃我是大法师
                    </el-descriptions-item>
                    <el-descriptions-item label="需求名称">RM_0002435q345345346643646理财模块提升需求发噶补充岁的娃娃我是大法师
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>
        </div>

        <div style="margin-top: 20px ;height: 50% ;">
            <el-row :gutter="20">
                <el-col :span="14" :offset="10">
                    <el-input
                            style="width: 36%;margin-right: 20px"
                            placeholder="请输入内容"
                            prefix-icon="el-icon-search">
                    </el-input>
                    <el-button type="primary" size="medium">需求修改</el-button>
                    <el-button type="primary" size="medium">需求关闭</el-button>
                    <el-button type="primary" size="medium">覆盖率刷新</el-button>

                </el-col>
            </el-row>

            <el-card class="box-card" style="margin: 20px;border-radius: 16px;height: 90%">
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="name"
                            label="轮次信息"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="name1"
                            label="SCO"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="name2"
                            label="CDC">
                    </el-table-column>
                    <el-table-column
                            prop="name3"
                            label="更新时间">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary">跳转</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                </el-table>

                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="1000">
                </el-pagination>

            </el-card>
        </div>
    </div>
</div>


<script>


    //模拟get请求
    Mock.mock('http://mockjs/api/getGoods', 'get', {
        status: 200,
        message: '获取列表成功',
        //随机生成5-8条数据
        'data|5-8': [{
            id: '@increment()',  //生成自增的id
            //'id|+1':1,  //也是模拟自增的id
            name: '@cword(3,5)',  //生成3-5个汉字
            price: '@natural(10,20)',  //生成10-20之间的任意数字
            count: '@natural(10,20)',
            img: '@dataImage(250x250)',//生成指定宽高的image图片，建议使用dataImage
        }]
    })

    //模拟post请求,外层的Mock只负责拦截接口和方法的定义
    Mock.mock('http://mockjs/api/getGoods', 'post', function (option) {
        //请求相关的参数
        console.log(option)
        //模拟假数据需要重新写Mock
        return Mock.mock({
            status: 200,
            message: '@cword(4,9)'
        })
    })


    var vue = new Vue({
        el: '#pageInfo',
        data: {
            filterText: '',
            data: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            tableData: [{
                name: '张三',
                name1: '王小虎',
                name2: '上海市普陀区金沙江路 1518 弄',
                name3: '2016-05-02'
            }, {
                name: '张三',
                name1: '王小虎',
                name2: '上海市普陀区金沙江路 1518 弄',
                name3: '2016-05-02'
            },{
                name: '张三',
                name1: '王小虎',
                name2: '上海市普陀区金沙江路 1518 弄',
                name3: '2016-05-02'
            }
            ]

        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        created: function () {

        },
        mounted: function () {
            this.test()
        },
        methods: {
            test() {
                //vue的请求
                this.$http.get(`http://mockjs/api/getGoods`, {
                    params: {}

                }).then(function (result) {
                    console.log(result)
                });
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            }
        }
    })
</script>

</body>
</html>